<template>
  <div class="leftmanu">
    <el-menu
      active-text-color="#ffd04b"
      unique-opened
      router
      :collapse-transition="false"
      :collapse="!headerstore.iscol"
      background-color="#545c64"
      :default-active="route.path"
      text-color="#fff"
    >
      <el-sub-menu :index="'/main/' + item.path" v-for="(item, index) in menusData" :key="item.id">
        <template #title>
          <el-icon>
            <component :is="iconList[index]"></component>
          </el-icon>
          <span>{{ $t(`menus.${item.path}`) }}</span>
        </template>
        <el-menu-item :index="'/main/' + item2.path" v-for="item2 in item.children" :key="item2.id">
          <template #title>
            <el-icon>
              <component :is="icon"></component>
            </el-icon>
            <span>{{ $t(`menus.${item2.path}`) }} </span>
          </template></el-menu-item
        >
      </el-sub-menu>
    </el-menu>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import { useRoute } from 'vue-router'
import { menusList } from '../../../server/menu'
import { headerStore } from '../../../store/head'

export default defineComponent({
  setup() {
    // icons
    const iconList = ref(['User', 'setting', 'shop', 'tickets', 'pie-chart'])
    const icon = ref('menu')
    // hearstore
    const headerstore = headerStore()
    // 获取左侧菜单
    const route = useRoute()
    const menusData = ref([])
    const menulist = async () => {
      const res = await menusList()
      menusData.value = res.data
    }
    menulist()
    return {
      menusData,
      route,
      iconList,
      icon,
      headerstore
    }
  }
})
</script>

<style lang="scss" scoped>
.leftmanu {
  overflow: hidden;
}
.el-menu {
  border-right: 0px !important;
}
</style>
